<template>
  <div class="headerbox">
    <div class="headerleft">
      <img src="../../assets/img/logoo.png" alt="" />
      <div>
        <p>旷野车辆管理系统</p>
        <p>vehicle-management-system</p>
      </div>
    </div>

    <div class="headermiddle">
      <el-dropdown @command="handleCommandsearch" placement="bottom">
        <span class="el-dropdown-link">
          <el-input
            @input="searchfun()"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputvalue"
          >
          </el-input>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(v, i) in searcharr"
            :command="v.menuId"
            :key="i"
            >{{ v.menuWord }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="headerright">

      <span class="userrole">{{ role }}</span>
      <span class="usernum">{{ usernamenew }}</span>

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <i
            :class="iconclass"
            @mouseenter="iconfun1()"
            @mouseleave="iconfun2()"
          ></i>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { searchlink ,adminnamefind} from "../../apis/login";
export default {
  data() {
    return {
      iconclass: "el-icon-user",
      username: "",
      usernamenew: "",
      inputvalue: "",
      searcharr: [],
      role:"",
      routearr: [
        "/home/VehicleInfo",
        "/home/CarParts",
        "/home/applycar",
        "/home/returncar",
        "/home/vehiclefee",
        "/home/zsja",
        "/home/zsjb",
        "/home/Maintenance",
        "/home/PickupCar",
        "/home/lyja",
        "/home/lyjb",
      ],
    };
  },
  methods: {
    iconfun1() {
      // console.log("icon");
      this.iconclass = "el-icon-user-solid";
    },
    iconfun2() {
      // console.log("icon");
      this.iconclass = "el-icon-user";
    },
    numberfun(num) {
      let num1 = num.substr(0, 3);
      let num2 = num.substr(7);
      return num1 + "****" + num2;
    },
    handleCommand(command) {
      console.log("outlogin", command);
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("username");
      this.$router.push("/login");
    },
    searchfun() {
      searchlink(this.inputvalue).then((ok) => {
        // console.log(this.inputvalue);
        // console.log(ok);
        this.searcharr = ok.data.data;
        // console.log(this.searcharr);
      });
    },
    handleCommandsearch(command) {
      // this.$message(command);
      this.$router.push(this.routearr[command - 1]);
    },
  },
  mounted() {
    if (window.sessionStorage.getItem("username")) {
      this.usernamenew = this.numberfun(
        window.sessionStorage.getItem("username")
      );
    } else {
      this.usernamenew = "";
    }

    adminnamefind(window.sessionStorage.getItem("username")).then((ok)=>{
      // console.log("username",window.sessionStorage.getItem("username"))
      console.log("find",ok.data.data.role)
      this.role=ok.data.data.role
    })
  },
  
  
};
</script>

<style lang="scss">
.headerbox {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerleft {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    img {
      height: 70%;
      vertical-align: middle;
    }
    p:nth-child(1) {
      font-size: 18px;
      color: #4990e2;
      margin-top: 5px;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #f5a623;
    }
  }
  .headerright {
    height: 100%;
    display: flex;
    align-items: center;
    .usernum {
      color: #f5a623;
    }
    .userrole{
      color: green;
    }
    .el-icon-user,
    .el-icon-user-solid {
      font-size: 30px;
      font-weight: 700;
      color: #4990e2;
    }
    .el-icon-user-solid {
      color: #f5a623;
    }
    .el-icon--right {
      color: #4990e2;
      font-weight: 700;
    }
  }
}
</style>